<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../000-assets/js/react.development.js"></script>
    <script src="../000-assets/js/react-dom.development.js"></script>
    <script src="../000-assets/js/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script>
      /*
          React.createElement()
            - 用来创建一个React元素，注意是React元素不是真实DOM元素
            - 参数:
                1. 元素名, 可以是标签名，也可以是组件名。注意标签名必须小写
                2. 属性对象，属性对象中可以包含一些属性，比如className，id等
                    不过要注意，大部分事件名比如onclick在ReactDOM的属性名中为驼峰命名法也就是onClick
                    另外，class在ReactDOM中被替换为了className，还是那句话，这是ReactDOM，不是真实DOM
                3. 子元素，可以是多个React元素，也可以是字符串，数字，布尔值等
            - 注意：
                React元素最终会通过虚拟DOM转换为真实的DOM元素
                React元素一旦创建就无法修改
      */

      // 创建一个ReactDOM元素
      const button = React.createElement(
        "button",
        { id: "btn", type: "button", className: "hello",onClick:()=>console.log(123) },
        "点我把"
      );    

      // 获取根元素，其实就是把一个真实存在的dom元素转换为ReactDOM元素
      const root = ReactDOM.createRoot(document.querySelector("#root"));

      // 将元素再在根元素中显示
      root.render(button);
    </script>
  </body>
</html>
